<!--历史记录 -->
<template>
    <div class="page hisPolices-page" id="hisPolices-page_{{getNewId}}" data-page="historyPolice" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link back" @click="$root.backToTab()">
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top">
            <div class="link-page-title">历史记录</div>
            <a href="#" class="link" @click="hisPolicesWitch" style="margin-right: 40px;">
                <i id="hisPoliceState_{{getNewId}}" class="iconfont icon-APPicon_lishi8"></i>
            </a>
            <a href="#" class="link" id="hisPolices_date_{{getNewId}}">
                <i class="iconfont icon-rili"></i>
            </a>
        </div>
        <div data-infinite-distance="50" class="page-content infinite-scroll-content hisPolices-page-content"
             @infinite="getloadMoreData" style="background-color:#fff;padding-bottom: 70px;">
            <div class="hisPolices-block-list">
                <div id="historyPoliceList_{{getNewId}}" class="historyPoliceList"></div>
                <div id="history_preloader_{{getNewId}}" class="preloader infinite-scroll-preloader"></div>
            </div>
            <div class="hisPolices-pie">
                <div id="historyPolicedes_{{getNewId}}" class="historyPolicedes">
                    <p>警情总次数<span>0次</span></p>
                </div>
                <div id="historyPolice_pie_{{getNewId}}" class="historyPolice-pie"></div>
                <div class="line-hr"></div>
                <div id="historyPoliceTimedes_{{getNewId}}"  class="historyPoliceTimedes">
                    <p>警情总时长<span>0天</span></p>
                </div>
                <div id="historyPoliceTime_{{getNewId}}" class="historyPoliceTime"></div>
            </div>
        </div>
    </div>
</template>
<script>
    return {
        data: function () {
            return {
                pageIndex: 0,
                loadMore:false,
                pageSize:25,
                viewState:true,
                startTimeStr:"",
                endTimeStr:"",
                eqChart:null,
                timeEqChart:null,
                getNewId: (new Date()).getTime()
            }
        },
        methods: {
            getloadMoreData:function(){
                if (this.loadMore&&this.viewState){
                    this.pageIndex++;
                    this.gethistoryPolice();
                }
            },
            hisPolicesWitch:function(){
                if(!getClickEnabel()) return
                var self = this
                if (self.viewState){
                    //统计
                    jQuery("#hisPoliceState_" + self.getNewId).removeClass("icon-APPicon_lishi8").addClass("icon--2");
                    $("#hisPolices-page_"+self.getNewId+" .hisPolices-block-list").hide();
                    $("#hisPolices-page_"+self.getNewId+" .hisPolices-pie").show();
                    $("#historyPoliceList_" + self.getNewId).empty();
                    $("#history_preloader_" + self.getNewId).hide();
                    this.getDataStatistics();
                } else {
                    //列表
                    jQuery("#hisPoliceState_" + self.getNewId).removeClass("icon--2").addClass("icon-APPicon_lishi8");
                    $("#hisPolices-page_"+self.getNewId+" .hisPolices-block-list").show();
                    $("#hisPolices-page_"+self.getNewId+" .hisPolices-pie").hide();
                    $("#historyPoliceList_" + self.getNewId).empty();
                    this.pageIndex = 0;
                    this.gethistoryPolice();
                }
                this.viewState = !this.viewState;
            },
            //饼图统计
            getDataStatistics: function () {
                var self = this;
                common.loading(1);
                Dao.getFacsRecordCount({
                    userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                    fcfId:self.$route.params.id,
                    startTime:self.startTimeStr,
                    endTime:self.endTimeStr,
                },function(data) {
                  common.loading(0);
                  if (self.eqChart) {
                      self.eqChart.dispose();
                  }
                  if (self.timeEqChart){
                      self.timeEqChart.dispose();
                  }
                  if (data.total == 0) {
                      $("#historyPoliceList_" + self.getNewId).append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
                      $("#historyPolice_pie_" + self.getNewId).empty();
                      $("#historyPoliceTime_" + self.getNewId).empty();
                      $("#historyPolice_pie_" + self.getNewId).append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
                      $("#historyPoliceTime_" + self.getNewId).append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
                  } else {
                      $("#historyPoliceList_" + self.getNewId).empty();
                      $("#historyPolicedes_" + self.getNewId+" span").html(" "+data.total+"次");
                      $("#historyPoliceTime_" + self.getNewId).empty();
                      $("#historyPoliceTimedes_" + self.getNewId+" span").html(" "+common.getSecondsFormat(data.totalTime)); 
                      self.drawChart(data,"historyPolice_pie_" + self.getNewId);
                      self.drawTimeChart(data,"historyPoliceTime_" + self.getNewId); 
                  }
                });
            },
            drawChart:function(data,htmlId) {
                this.eqChart = echarts.init(document.getElementById(htmlId));
                this.eqChart.setOption({
                    title : {},
                    tooltip : {
                        trigger : 'item',
                        formatter : "{b}"
                    },
                    series : [ {
                        // name: '探测器状态',
                        type : 'pie',
                        radius : ['40%', '70%'],
                        center : [ '50%', '50%' ],
                        data : [ {
                            value : (data.alert),
                            name : '报警'+data.alert+'次',
                            itemStyle: {normal:{color: '#E07762'}}
                        }, {
                            value : (data.fault),
                            name : '故障'+data.fault+'次',
                            itemStyle: {normal:{color: '#eeb328'}}
                        }, {
                            value : (data.sheilding),
                            name : '屏蔽'+data.sheilding+'次',
                            itemStyle: {normal:{color: '#a8a8a8'}}
                        }],
                        itemStyle : {
                            emphasis : {
                                shadowBlur : 10,
                                shadowOffsetX : 0,
                                shadowColor : 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    } ]
                });
            },
            drawTimeChart:function(data,htmlId) {
                this.timeEqChart = echarts.init(document.getElementById(htmlId));
                this.timeEqChart.setOption({
                    title : {},
                    tooltip : {
                        trigger : 'item',
                        formatter : "{b}"
                    },
                    series : [ {
                        // name: '探测器状态',
                        type : 'pie',
                        radius : ['40%', '70%'],
                        center : [ '50%', '50%' ],
                        data : [ {
                            value : (data.alertTime),
                            name : '报警 '+common.getSecondsFormat(data.alertTime),
                            itemStyle: {normal:{color: '#E07762'}}
                        }, {
                            value : (data.faultTime),
                            name : '故障 '+common.getSecondsFormat(data.faultTime),
                            itemStyle: {normal:{color: '#eeb328'}}
                        }, {
                            value : (data.sheildingTime),
                            name : '屏蔽 '+common.getSecondsFormat(data.sheildingTime),
                            itemStyle: {normal:{color: '#a8a8a8'}}
                        }],
                        itemStyle : {
                            emphasis : {
                                shadowBlur : 10,
                                shadowOffsetX : 0,
                                shadowColor : 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    } ]
                });
            },
            //列表
            gethistoryPolice: function () {
                var self = this;
                Dao.getSpecialFcfHistoryRecords({
                    userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                    fcfIds:self.$route.params.id,
                    fireTType:'',
                    pageIndex: self.pageIndex,
                    pageSize: self.pageSize,
                    startTime:self.startTimeStr,
                    endTime:self.endTimeStr,
                    continueTimeUnit:3
                },function(_data) {
                    let data=_data?_data.listData:[]
                    if (data && data.length>0){
                      if (data.length < self.pageSize){
                            $("#history_preloader_" + self.getNewId).hide();
                            self.loadMore = false;
                      } else {
                           $("#history_preloader_" + self.getNewId).show();
                            self.loadMore = true;
                      }
                      for (var i=0;i<data.length;i++){
                          var status_name = '联动';
                          if (data[i].fireTTypes.indexOf('10')>-1){
                              status_name = "报警";
                          }else if (data[i].fireTTypes.indexOf('20')>-1){
                              status_name = "故障";
                          }else if (data[i].fireTTypes.indexOf('30')>-1){
                              status_name = "屏蔽";
                          }else {
                              status_name = "联动";
                          }
                         $("#historyPoliceList_" + self.getNewId).append(
                            `<div class="row no-gap my-row" id="row_`+(self.getNewId+"_"+data[i].id)+`">
                                    <div class="col-20" style="background-color:#d4d4d4;";>
                                    <span style="font-size:17px;line-height: 75px;color:`+transFireColor(data[i].fireTTypes)+`">`+status_name+`</span>
                                    </div>
                                    <div class="col-80 text-col">
                                    <div class="text-col-one" style="margin-bottom:8px;font-size: 14px;"><span style="color:#8e8a8a;margin-right:8px;">发生时间: </span>`+moment(data[i].storageTime).format("YYYY-MM-DD HH:mm")+`</div>
                                    <div class="text-col-one" style="font-size: 14px;"><span style="color:#8e8a8a;margin-right:8px;">持续时间: </span
                                    >`+common.transNullundefinedToline(data[i].continueTimeStr)+`</div>
                                </div>
                            </div>
                            `);
                          jQuery("#row_"+self.getNewId+"_"+data[i].id).off("click").on("click",{"data":data[i]},function(e) {
                              var data= e.data.data;
                              app.router.navigate("/policeHistoryDetail/"+data.fcFacilitiesId+"/"+data.id+"/"+ data.createTime+"/");//模拟量警情详情
                          });
                      }
                    } else {
                      jQuery("#history_preloader_" + self.getNewId).hide();
                      self.loadMore = false;
                      if(self.pageIndex==0){
                         jQuery("#historyPoliceList_" + self.getNewId).append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
                      }
                    }
                });
            },
        },
        on: {
            pageInit: function(e, page) {
                var self = this;
                self.gethistoryPolice();
                //绑定时间
                //type 0:年 1:年月 2：月日
                var selectOptionIndex = null;
                jQuery("#hisPolices_date_" + self.getNewId).off().click(function () {
                    let date = common.getTimeArray(1);
                    selectOptionFn(date,function(data){
                        if(selectOptionIndex != data.index){
                            selectOptionIndex = data.index;
                            // self.startTimeStr = data.startTime;
                            // self.endTimeStr = data.endTime;
                            var timeArr = data.name;
                            self.startTimeStr = timeArr.replace("年", "-").replace("月", "-") + "01" + " 00:00:00";
                            let endDay = mGetDate(self.startTimeStr.split("-")[0], self.startTimeStr.split("-")[1]);
                            self.endTimeStr = timeArr.replace("年", "-").replace("月", "-") + endDay +  " 23:59:59";
                        }else{
                            selectOptionIndex = "";
                            self.startTimeStr = "";
                            self.endTimeStr = "";
                        }
                        self.pageIndex==0;
                        self.loadMore = false;
                        if(!self.viewState){
                            $("#historyPolicedes_"+ self.getNewId +" span").html("0次");
                            $("#historyPoliceTimedes_"+ self.getNewId +" span").html("0天");
                            if (self.eqChart) {
                                self.eqChart.dispose();
                            }
                            if (self.timeEqChart){
                                self.timeEqChart.dispose();
                            }
                            self.getDataStatistics();
                        }else{
                            jQuery("#historyPoliceList_" + self.getNewId).empty();
                            self.gethistoryPolice();
                        }
                    },selectOptionIndex);
                });
            },
        },
    }
</script>

<style scoped>
/* 设备详情 - 历史记录 */
.my-row {
    border: 1px solid rgba(225, 225, 225, 0.9);
    box-shadow: 0px 1px 10px 0px rgba(181, 200, 206, 0.5);
    border-radius: 6px;
    margin: 0 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 1.5px 3.5px 0 rgba(0, 0, 0, 0.2);
    height: 75px;
}
.my-row .col-20 {
    border-right: 1px solid #e1e1e1;
    text-align: center;
    height: 100%;
}
.historyPoliceTime,.historyPolice-pie{
    width: 100%;
    min-height: 200px;
}
.hisPolices-pie{
    display: none;
    padding-bottom: 40px;
}
.hisPolices-block-list{
    padding-bottom: 40px;
}
</style>

















